<script setup>
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import Avatar from "@/views/personal/components/Avatar.vue";
import {onBeforeMount, ref} from 'vue'
import {getUserAllInfo} from "@/api/user.js";
import {getDatetimeFormatByStamp} from "@/utils/DateUtils.js";
import {hideMail, hidePhone} from "@/utils/StringUtils.js";

const userAllInfo = ref({})
onBeforeMount(async () => {
  userAllInfo.value = await getUserAllInfo()
})

const showHide = ref(false)
</script>

<template>
  <div class="personal">
    <GoBackAndSearchNav :title="'个人信息'" :placeholder="true"></GoBackAndSearchNav>
    <Avatar></Avatar>
    <van-cell title="显示隐藏信息">
      <template #value>
        <van-switch v-model="showHide" size="15px"/>
      </template>
    </van-cell>
    <van-cell title="用户名" :value="userAllInfo.username" />
    <van-cell title="账号" :value="userAllInfo.account" />
    <van-cell title="邮箱" :value="showHide ? userAllInfo.mail : hideMail(userAllInfo.mail)" />
    <van-cell title="手机号" :value="showHide ? userAllInfo.phone : hidePhone(userAllInfo.phone)" />
    <van-cell title="性别" :value="userAllInfo.gender ? '男' : '女'" />
    <van-cell title="是否实名" :value="userAllInfo.realName ? '已实名' : '未实名'" />
    <van-cell title="注册时间" :value="getDatetimeFormatByStamp(userAllInfo.registerTime)" />
  </div>
</template>

<style scoped lang="scss">

</style>